<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

    <h:head>         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </meta>
        <title>Mapa</title>

        <link rel="stylesheet" href="media/css/ammap.css" type="text/css" />   
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script src="media/js/ammap_admin.js" type="text/javascript"></script>
        <!-- map file should be included after ammap.js -->
        <script src="media/js/usaLow.js" type="text/javascript"></script> 

        <script type="text/javascript">
  
            var map;
            function writeDevInfo(event) {
                document.getElementById("devInfo").innerHTML = event.str;
            }
            AmCharts.ready(function() {
        
                map = new AmCharts.AmMap();
                map.pathToImages = "media/css/images/";
                //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
		map.selectable = true;	    	   
                map.balloon.color = "#000000";
                var dataProvider = {
                    mapVar: AmCharts.maps.usaLow,
                    areas: [ #{managerMap.map} ]
                };
			
                var legend = {
                    width: 250,
                    backgroundAlpha: 0.5,
                    borderColor: "#666666",
                    borderAlpha: 1,
                    bottom: 10,
                    left: 15,
                    horizontalGap: 10,
                    data: [
                        {
                            title: "Disponível",
                            color: "#65c960"},
                        {
                            title: "Reservado",
                            color: "#FFCC33"},
                        {
                            title: "Em Trâmite",
                            color: "#0000cc"},
                        {
                            title: "Vendido",
                            color: "#db2815"}
                    ]
                };
                map.addLegend(legend);
                map.buttonColorHover = "#00ff00";
                //                map.areasSettings = {
                //                    autoZoom: true
                //                };
                map.dataProvider = dataProvider;
            
                            
                //      map.developerMode = true;
                //    map.addListener("writeDevInfo", writeDevInfo);
			
                map.write("mapdiv");
                
            });
            

        </script>

    </h:head>
    <h:body  class="home">
        <h:form id="mapForm">
        <div class="nav-container">
            <nav>
                <ul  class="dropdown">
                    <li class="first current"><a href="index.xhtml">Início</a></li>
                    <li><a href="indexsale.xhtml">Venda</a></li>
                    <li><a href="indexenterprise.xhtml">Empreendimentos</a></li>
                    <li><a href="indexcorrector.xhtml">Corretor</a></li>
                    <li><a href="indexcustomer.xhtml">Cliente</a></li>
                    <li><a href="indexconstruction.xhtml">Construtora</a></li>
                    <li><a href="indexuser.xhtml">Administração</a></li>
                </ul>
            </nav>
        </div>

        <div id="mapdiv" style="width: 100%; ; height: 600px;"></div>
        <br/>  
        <p:remoteCommand name="lazyload" actionListener="#{managerMap.atualizaLot()}" >
	</p:remoteCommand>
        </h:form>
    </h:body>
</html>
